<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>解构的姓名：{{ name }}</h2>
    <h2>解构的年龄：{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { reactive, toRefs } from "vue";

  let person = reactive({ name: '张三', age: 18 })

  /* 
  相当于
  let name = person.name
  let age = person.age
  但是并没有对 person.name = XXX 或者 person.age = XXX 进行赋值的操作
  */
  // let { name, age } = person  //直接解构出来的属性不是响应式

  let { name, age } = toRefs(person)

  function changeName() {
    // person.name += '~'
    name.value += '~'
    console.log(name, person.name);

  }

  function changeAge() {
    // person.age += 1
    age.value += 1
    console.log(age, person.age);
  }

</script>

<style scoped>
  .person {
    width: 100%;
    background-color: skyblue;
    box-shadow: 0px 1px 2px #ddd;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
</style>
